<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <h1>现代web 布局 </h1>
  <p>使用 css 网格布局构建 web静丹布局，即 full-bleed 布局</p>
  <p>Meaning that a low-fi sketch doesn’t represent all details of the design you’re working ons.Meaning that a low-fi sketch doesn’t represent all details of the design you’re working ons.</p>

  <section class="full__bleed">
    <img src="https://picsum.photos/2568/600?random=1" width="2568" height="600" alt="" />
  </section>
  <p>Meaning that a low-fi sketch doesn’t represent all details of the design you’re working on, whereas a high-fi sketch is a muc.Meaning that a low-fi sketch doesn’t represent all details of the design you’re working ons.</p>
</div>
</template>

<style scoped lang="scss">
.wrap {
  --limit-max-container-width: 65ch;
  --limit-min-container-width: 23ch;
  --gutter: 1rem;

  width: 90vw;
  min-height: 100vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;
  line-height: 1.65;
  align-content: start;


  display: grid;
  grid-template-columns:
    [full__bleed-start] minmax(var(--gutter), 1fr)
    [main-start] minmax(
            min(
                var(--limit-min-container-width),
                100% - var(--gutter) * 2
            ),
            var(--limit-max-container-width))
    [main-end] minmax(var(--gutter), 1fr)
    [full__bleed-end];
  row-gap: var(--gutter);

  & > * {
    grid-column: main-start / main-end;
  }

  section {
    &.full__bleed {
      width: 100%;
      grid-column: full__bleed-start / full__bleed-end;
      background-color: red;
    }

    img {
      max-width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
      vertical-align: middle;
    }
  }
}
</style>
